<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb class="el-breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card class="el-card">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="searchData">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addUserBtn">添加用户</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-table class="el-table" border stripe :data="usersList">
						<el-table-column type="index"></el-table-column>
						<el-table-column label="姓名" prop="username"></el-table-column>
						<el-table-column label="邮箱" prop="email"></el-table-column>
						<el-table-column label="电话" prop="mobile"></el-table-column>
						<el-table-column label="角色" prop="role_name"></el-table-column>
						<el-table-column label="状态" prop="mg_state" width="170px">
							<template slot-scope="scope">
								<!-- scope.row.mg_state}} -->
								<el-switch @change="switchChange(scope.row)" v-model="scope.row.mg_state"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="180px">
							<template slot-scope="scope">
									<!-- 修改按钮 -->
									<el-button @click="reviseUserBtn(scope.row.id)" size="mini" type="primary" icon="el-icon-edit"></el-button>
									<!-- 删除按钮 -->
									<el-button @click="deleteUserBtn(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
									<!-- 分配权限按钮 -->
									<el-button @click="assignRoleBtnClick(scope.row)" size="mini" type="success" icon="el-icon-setting"></el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
			<!-- 跳转视图 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[2, 5, 10, 15]" :page-size="this.queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totalNum">
				</el-pagination>
			</div>
		</el-card>
		<!-- 对话框 -->
		<!-- 下面时分配角色对话框 -->
		<!-- 分配角色对话框 -->
		<el-dialog @close="assignRoleDialogClose" title="分配角色" :visible.sync="assignRoleDialogVisible" width="50%">
				<!-- 这里要写页面 -->
			<p>当前的用户: {{this.userInfo.username}}</p>
			<!-- <el-input v-model="currentUser" disabled></el-input> -->
			<p>当前的角色: {{this.userInfo.role_name}}</p>
			<!-- <el-input v-model="currentRole" disabled></el-input> -->
			<p>分配新的角色：
				<el-select v-model="newRole" placeholder="请选择新角色">
					<el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.roleName"></el-option>
				</el-select>
			</p>
			<div slot="footer" class="dialog-footer">
				<el-button @click="assignRoleDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="assignRoleDialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 下面是添加用户对话框 -->
		<el-dialog @close="addDialogClose" title="添加用户" :visible.sync="addUserFormVisible">
				<el-form ref="addUserFormRef" :model="addUserForm" :rules="addUserFormRule" label-width="80px">
					<el-form-item label="用户名称" prop="username">
						<el-input v-model="addUserForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="addUserForm.password"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="addUserForm.email"></el-input>
					</el-form-item>
					<el-form-item label="手机" prop="mobile">
						<el-input v-model="addUserForm.mobile"></el-input>
					</el-form-item>
				</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addUserDialogCancel">取 消</el-button>
				<el-button type="primary" @click="addUserDialogConcent">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 下面是修改用户对话框 -->
		<el-dialog @close="reviseDialogClose" title="修改用户" :visible.sync="reviseUserFormVisible">
				<el-form ref="reviseUserFormRef" :model="reviseUserForm" :rules="reviseUserFormRule" label-width="80px">
					<el-form-item label="用户id" prop="id">
						<el-input v-model="reviseUserForm.id"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="reviseUserForm.email"></el-input>
					</el-form-item>
					<el-form-item label="手机" prop="mobile">
						<el-input v-model="reviseUserForm.mobile"></el-input>
					</el-form-item>
				</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="reviseUserDialogCancel">取 消</el-button>
				<el-button type="primary" @click="reviseUserDialogConcent">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data () {
			return {
					// 对象：获取到的角色列表
				rolesList: [],
					// 绑定：当前选中的新角色
				newRole: '',
					// 分配角色对话框绑定角色和用户名
				userInfo: {},
				currentUser: '',
				currentRole: '',
				assignRoleDialogVisible: false,
				reviseUserFormRule: {
					id: [],
					email: [
						{ required: true, message: '请输入邮箱', trigger: 'blur' }
					],
					mobile: [
						{ required: true, message: '请输入手机', trigger: 'blur' }
					]
				},
				reviseUserForm: {
					id: 0,
					email: '',
					mobile: ''
				},
				reviseUserFormVisible: false,
				// addUserFormRef: {},
				addUserFormRule: {
					username: [
						{ required: true, message: '请输入用户名', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' }
					],
					email: [
						{ required: true, message: '请输入邮箱', trigger: 'blur' }
					],
					mobile: [
						{ required: true, message: '请输入手机', trigger: 'blur' }
					]
				},
				addUserForm: {
					username: '测试角色',
					password: '123456',
					email: '123456789@qq.com',
					mobile: '13255055505'
				},
				addUserFormVisible: false,
				currentPage: 1,
				totalNum: 0,
				// pageSize: this.queryInfo.pagesize,
				// currentPage: this.queryInfo.pagenum,
				searchData: '',
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 2,
					isStateSwitch: true
				},
				usersList: []
			}
		},
		methods: {
				// 函数：请求全部角色信息
			async getRolesList () {
				const { data: res } = await this.$http.get('roles')
				if (res.meta.status !== 200) {
					return this.$message.error('获取角色信息失败')
				}
				this.rolesList = res.data
			},
				// 事件：当分配角色按钮点击时，打开对话框
			assignRoleBtnClick (userInfo) {
				this.userInfo = userInfo
				this.getRolesList()
				this.assignRoleDialogVisible = true
				// this.currentUser = userInfo.username
				// this.currentRole = userInfo.role_name
					// console.log(userInfo)
			},
				// 事件：当分配角色对话框关闭时，清空
			assignRoleDialogClose () {
				this.$message.success('assignRoleDialogClose')
			},
			// 下面的代码发送Ajax请求数据
			async getUsersList () {
				// this.$message.success('getUsersList')
				const { data: res } = await this.$http.get('users', { params: this.queryInfo })
				if (res.meta.status !== 200) return this.$message.error('获取用户列表数据失败!')
				this.usersList = res.data.users
				this.totalNum = res.data.total
				// console.log(res.data.total)
				// console.log(this.usersList.data)
			},
			// 下面的代码监控用户状态改变
			async switchChange (scopeRow) {
				// this.$message.success('switchChange')
				// console.log(scopeRow)
				const {
					data: res
				} = await this.$http.put(`users/${scopeRow.id}/state/${scopeRow.mg_state}`)
				// console.log(res)
				if (res.meta.status !== 200) {
					scopeRow.mg_state = !scopeRow.mg_state
					return this.$message.error('修改状态失败')
				}
				return this.$message.success('修改状态成功')
			},
			handleSizeChange (newSize) {
				// this.$message.success('handleSizeChange')
				// 改变size的值
				// console.log(rewSize)
				this.queryInfo.pagesize = newSize
				// 重新请求
				this.getUsersList()
			},
			handleCurrentChange (newCurrent) {
				// this.$message.success('handleCurrentChange')
				// console.log(newCurrent)
				this.queryInfo.pagenum = newCurrent
				// 重新请求
				this.getUsersList()
			},
			addUserBtn () {
				this.addUserFormVisible = true
			},
			// 下面的代码重置表单
			addDialogClose () {
				// this.$message.success('addDialogClose')
				// this.$refs.addUserFormRef.resetfields
				this.$refs.addUserFormRef.resetFields()
			},
			addUserDialogCancel () {
				this.addUserFormVisible = false
			},
			async addUserDialogConcent () {
				this.addUserFormVisible = false
				const { data: res } = await this.$http.post('users', this.addUserForm)
				// console.log(res)
				if (res.meta.status !== 201) return this.$message.error('添加用户失败')
				this.$message.success('添加用户成功')
				// 重新请求
				this.getUsersList()
			},
			// 下面是监听修改用户对话框关闭事件的代码
			reviseDialogClose () {
				this.$message.success('reviseDialogClose')
				this.$refs.reviseUserFormRef.resetFields()
			},
			reviseUserDialogCancel () {
				this.$message.success('reviseUserDialogCancel')
				this.reviseUserFormVisible = false
			},
			async reviseUserDialogConcent () {
				// this.$message.success('reviseUserDialogConcent')
				this.reviseUserFormVisible = false
				const { data: res } = await this.$http.put(`users/${this.reviseUserForm.id}`, this.reviseUserForm)
				// console.log(res)
				if (res.meta.status !== 200) return this.$message.error('修改用户信息失败')
				this.$message.error('修改用户信息成功')
				// 重新请求
				this.getUsersList()
			},
			async reviseUserBtn (rowId) {
				this.reviseUserFormVisible = true
				// 下面的代码根据ID查询用户信息
				// console.log(rowId)
				const { data: res } = await this.$http.get(`users/${rowId}`)
				// console.log(res)
				if (res.meta.status !== 200) return this.$message.error('获取用户信息失败')
				this.$message.error('获取用户信息成功')
				this.reviseUserForm.id = res.data.id
				this.reviseUserForm.email = res.data.email
				this.reviseUserForm.mobile = res.data.mobile
			},
			// 删除询问代码
			deleteUserBtn (rowId) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					// console.log(rowId)
					const { data: res } = await this.$http.delete(`users/${rowId}`)
					// console.log(res)
					if (res.meta.status !== 200) return this.$message.error('删除用户失败')
					this.$message.success('删除用户成功')
					// 重新请求
					this.getUsersList()
				}).catch(() => {
					this.$message.success('取消删除')
					})
			}
		},
		created () {
			this.getUsersList()
		}
	}
</script>

<style lang="less" scoped>
	.el-breadcrumb {
		margin-bottom: 15px;
	}

	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
	}

	.el-table {
		margin-top: 15px;
		// align-items: center;
		// text-align: center;
	}

	.block {
		margin-top: 15px;
	}
</style>
